define(['jquery'], ($) => {
  // 切换缩略图
  class changeThumbsEvent {

    constructor () {
      this.thumbsLastIndex = 0
      this.bindEvent()
    }

    bindEvent () {
      const _this = this
      // 获取缩略图大盒子
      const thumbsUl = $('.product-gallery-thumbs ul')
      // 获取缩略图列表
      const thumbsList = $('.product-gallery-nav li a')
      // 获取主图
      const imgProduct = $('.product-gallery-img img')
      // 获取原图
      const imgBigProduct = $('.product-gallery-img-big img')


      $('.product-gallery-nav')
        .on('click', '#prevProduct', () => {
          const left = parseInt(thumbsUl.css('left'))
          if (left >= 0) return false

          thumbsUl.css('left', left + 74)
        })
        .on('click', '#nextProduct', () => {
          const left = parseInt(thumbsUl.css('left'))

          if (left <= (thumbsList.length - 5) * -74) return false

          thumbsUl.css('left', left - 74)
        })
        .on('mouseenter', 'li', function () {
          // 获取当前缩略图容器
          const thumbContent = $(this).find('a')
          // 获取当前缩略图
          const thumbCurrent = thumbContent.find('img')
          // 获取当前缩略图地址
          const targetSrc = thumbCurrent.attr('src')
          // 改变当前标识
          thumbsList.removeClass('current')
          thumbContent.addClass('current')

          // 改变主图和原图
          imgProduct.attr('src', targetSrc)
          imgBigProduct.attr('src', targetSrc)
        })
        .on('mouseleave', 'li', function () {
          _this.thumbsLastIndex = $(this).index()
        })
    }
  }

  return changeThumbsEvent
})
